<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-input
          placeholder="借款客户"
          @keyup.enter.native="getData()"
          @clear="getData()"
          clearable
          v-model="params.customer_name"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <c-select
          placeholder="客户类型"
          clearable
          number-key
          :options="enumCustomerType"
          v-model="params['org_class.eq']"
          @change="getData()"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          class="date-picker-ml"
          v-model="datePicked"
          type="daterange"
          unlink-panels
          range-separator="-"
          start-placeholder="通过时间(开始)"
          end-placeholder="通过时间(截止)"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
          @change="handleDateChange"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
    </el-form>

    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData"></c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="tableCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <attach-cmpt :visible.sync="attachVisible" :customer-related-id="attachRelatedId"></attach-cmpt>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { dateFormat, dateFromString } from '@vimi/utils-tool'

import { lastPickerShortcuts } from '@/common/plugins/tools/date'
import {
  enumCustomerType,
  baseTableColumns,
  dataAdapter,
  enumLoanbehStatus,
  enumloanStatusStyle,
} from '@/bank/views/limit/index'
import { limitNormalParams } from '@/bank/views/limit/mixins'

import AttachCmpt from '@/credit/views/city/program/Attach'

const tableColumns = [
  ...baseTableColumns,
  {
    attrs: { label: '到期剩余天数', prop: 'remainDayLabel', align: 'center' },
    process: (_, row) => ({ attrs: { class: `text-${row.remainDayStyle}` } }),
  },
  {
    attrs: { label: '项目状态', prop: 'postloanStatus', align: 'center' },
    process: (_, row) => ({ attrs: { class: `text-${row.postloanStatusStyle}` } }),
  },
]

const DUE_PERIOD = 60 * 8.64e7
const lastEndDate = dateFormat(new Date(Date.now() + DUE_PERIOD), 'yyyy-MM-dd') + ' 23:59:59'

export default {
  components: {
    AttachCmpt,
  },
  mixins: [limitNormalParams],
  props: {},
  data() {
    return {
      enumCustomerType,

      loading: false,
      params: {
        index: 1,
        size: 10,
        customer_name: '',
        'is_pass.eq': 1,
        'org_class.eq': '',
        'load_end_date.lte': lastEndDate,
      },
      order: {
        load_end_date: 'asc',
      },
      tableName: 'datum_one_county_industry',
      tableColumns: [
        ...tableColumns,
        {
          attrs: { label: '操作', align: 'center', minWidth: '180px' },
          operations: [
            { name: '上传', event: this.handleUpload },
            { name: '查看', event: this.handleView },
          ],
        },
      ],
      tableData: [],
      tableCount: 0,

      // 提交时间选择
      datePicked: [],
      pickerOptions: {
        shortcuts: lastPickerShortcuts,
      },

      // 附件上传
      attachVisible: false,
      attachRelatedId: '',
    }
  },
  computed: {
    ...mapGetters(['clientId']),
  },
  watch: {},
  created() {
    this.getData()
  },
  mounted() {},
  methods: {
    getData(index = 1) {
      this.params.index = index
      this.loading = true
      this.$api
        .getData(
          this.$serviceName,
          this.tableName,
          {
            ...this.normalParams,
            ...this.params,
          },
          this.order
        )
        .then(res => {
          const data = (res && res.data) || {}
          this.tableData = (data.data || []).map(this.dataAdapter)
          this.tableCount = data.totalCount || 0
        })
        .finally(() => {
          this.loading = false
        })
    },

    dataAdapter(item) {
      item = dataAdapter(item)
      item.load_beh_status = +item.load_beh_status || 1
      item.postloanStatus = enumLoanbehStatus[item.load_beh_status] || ''
      item.postloanStatusStyle = enumloanStatusStyle[item.load_beh_status] || ''

      // 到期剩余天数
      let remainDay = 0
      const endDate = dateFromString(item.load_end_date)
      if (endDate) {
        remainDay = Math.ceil((endDate - Date.now()) / 8.64e7)
      }
      if (item.load_beh_status < 6) {
        item.remainDayLabel = `${remainDay}天`
        item.remainDayStyle = remainDay <= 0 ? 'danger' : remainDay <= 30 ? 'warning' : ''
      } else {
        item.remainDayLabel = '-'
        item.remainDayStyle = ''
      }

      return item
    },

    handleDateChange() {
      const [start, end] = this.datePicked || []
      if (start && end) {
        this.params['create_time.gte'] = start
        this.params['create_time.lte'] = `${end} 23:59:59`
      } else {
        this.params['create_time.gte'] = ''
        this.params['create_time.lte'] = ''
      }
      this.getData()
    },

    handleUpload(row = {}) {
      this.attachRelatedId = row.customer_related_id
      this.attachVisible = true
    },

    handleView() {},
  },
}
</script>

<style lang="scss" scoped></style>
